import {
  Card,
  ClientOnly,
  CodeBlock,
  createShikiAdapter,
  Float,
  IconButton,
  Text,
  VStack,
} from "@chakra-ui/react";
import type React from "react";
import { useMemo } from "react";
import type { HighlighterGeneric } from "shiki";
import { useColorMode } from "../../../../../components/ui/color-mode";
import bashSnippet from "../../../regions/observability/codegen/snippets/noandlo/n8n.snippet.sh";

export const NoLoN8nSetup: React.FC = () => {
  const { colorMode } = useColorMode();

  const shikiAdapter = useMemo(() => {
    return createShikiAdapter<HighlighterGeneric<any, any>>({
      async load() {
        const { createHighlighter } = await import("shiki");
        return createHighlighter({
          langs: ["bash"],
          themes: ["github-dark", "github-light"],
        });
      },
      theme: colorMode === "dark" ? "github-dark" : "github-light",
    });
  }, [colorMode]);

  return (
    <Card.Root>
      <Card.Header>
        <Text fontWeight="semibold">n8n setup</Text>
      </Card.Header>
      <Card.Body>
        <VStack align="stretch" gap={3}>
          <Text fontSize="sm">
            Install the LangWatch n8n nodes, set environment variables, and
            restart n8n.
          </Text>
          <CodeBlock.AdapterProvider key={colorMode} value={shikiAdapter}>
            <ClientOnly>
              {() => (
                <CodeBlock.Root
                  code={bashSnippet}
                  language="bash"
                  size="sm"
                  meta={{ colorScheme: colorMode }}
                >
                  <CodeBlock.Header>
                    <CodeBlock.Title>n8n install and configure</CodeBlock.Title>
                    <Float placement="top-end" offset="5" zIndex="1">
                      <CodeBlock.CopyTrigger asChild>
                        <IconButton variant="ghost" size="2xs">
                          <CodeBlock.CopyIndicator />
                        </IconButton>
                      </CodeBlock.CopyTrigger>
                    </Float>
                  </CodeBlock.Header>
                  <CodeBlock.Content>
                    <CodeBlock.Code>
                      <CodeBlock.CodeText />
                    </CodeBlock.Code>
                  </CodeBlock.Content>
                </CodeBlock.Root>
              )}
            </ClientOnly>
          </CodeBlock.AdapterProvider>
        </VStack>
      </Card.Body>
    </Card.Root>
  );
};
